<template>
	<view class="orderManagementPage">
		<view class="orderManagementTop flex">
			<view class="search-content">

				<image class="search-img" src="../../static/会员卡管理端/组合 405.png" mode=""></image>
				<input placeholder="请输入订单号,商品号" v-model="searchVal" @input="changeInput" @confirm="changeSearch"
					style="width: auto;line-height: 1em; " placeholder-style="font-size:28rpx;color:#A1A1A1;" />
				<image v-if="searchVal" class="icon_close" src="/static/delect.png" @click="close"></image>
			</view>
			<!-- <image class="timeImg" src="../../static/会员卡管理端/path (2).png" mode=""></image> -->



		</view>
		<sunui-navbar :items="tabList" lineHeight="70rpx" :isCenter="true" :currentIndex="currentIndex" padding="0rpx"
			activeColor="rgb(0, 124, 255)" :size="100" activeLineBg="rgb(0, 124, 255)" textAlign="center"
			activeLineWidth="50%" activeDirection="center" activeLineHeight="6rpx" bgColor="transparent" :margin="20"
			@change="e=>getChange(e,tabList[e].id)"></sunui-navbar>

		<view style="padding: 10rpx  30rpx">

			<!-- <view class="flex-between margin-top_20rpx" style="color: rgb(153, 153, 153);">
				<text>成交金额：￥360012.00 </text>
				<text>下单数：3620</text>
			</view> -->
		</view>
		<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
			@up="upCallback" :up="upOption" :down="downOption">
			<block v-for="(item,index) in list" :key="index">
				<!-- 订单列表 -->
				<view class="orderList" @click="orderDetial(item)">
					<view class="flex-between">
						<view class="flex">
							<view class="order">
								<text style="color: rgb(153, 153, 153);">订单号：{{item.sn_order}}</text>
							</view>
							<view class="copy flex" @click.stop="paste(item.sn_order)">
								<text>复制</text>
							</view>
						</view>
						<view class="sign flex">
							{{orderStatusFn(item.status)}}
						</view>
					</view>
					<view class="flex-end-top margin-top_30rpx">
						<view class="">
							<image class="orderImg" :src="item.host_img[0]" mode=""></image>
						</view>
						<view class="margin-left_16rpx flex-columns" style="width:514rpx;height: 180rpx;">
							<view class="font-overflow2" style="width:100%">
								{{item.goods_name}}
							</view>
							<view class="padding_10rpx_0 font-overflow" style="color: rgb(153, 153, 153);;width:100%">
								<text
									 >{{item.title}}</text>
								<!-- <text style="color: rgb(153, 153, 153);font-overflow2">原价:{{Number(item.coupon_deduction_amount)+Number(item.discount_amount)}}元</text> -->
							</view>
							<view class="flex-between">
								<view  >
									已优惠:{{Number(item.total_price)?(Number(item.total_price)-Number(item.reality_amount)).toFixed(2):0}}元
								</view>
								<view class="">
									数量：x{{item.number}}
								</view>
							</view>
						</view>
					</view>
					<view class="flex-between margin-top_30rpx">
						<view class="">
							<text class="font-weight_bold" style="color: rgb(255, 59, 59);">
								</text>
						</view>
						<view class="">
							<text>实付款：<text class="font-weight_bold">{{item.reality_amount}}元</text></text>
						</view>
					</view>
					<view class="orderDetail margin-top_20rpx">
						<view class="flex-start-center padding-bottom_20rpx border-bottom-ECECEC">
							<image class="userImg margin-right_16rpx" :src="item.avatar"
								mode="">
							</image>
							<view style="color: rgb(102, 102, 102);" class="">
								{{item.nickname}}
							</view>
						</view>
						<view class="padding-top_20rpx" v-if="item.take_over_way==2&&(item.name||item.phone)">
							<view class="font-weight_bold margin-bottom_10rpx">
								姓名：{{item.name}} {{item.phone}}
							</view>
							<view class="">
								<text>地址：{{item.province_name}}{{item.city_name}}{{item.county_name}}{{item.address}}</text>
							</view>

						</view>
						<view class="padding-top_20rpx" v-if="item.take_over_way==1&&(item.store_name||item.store_phone)">
							<view class="font-weight_bold margin-bottom_10rpx">
								门店：{{item.store_name}} {{item.store_phone}}
							</view>
							<view class="">
								<text>地址：{{item.store_province_name}}{{item.store_city_name}}{{item.store_county_name}}{{item.store_address}}</text>
							</view>
						
						</view>
					</view>
					<view class="flex-end margin-top_30rpx" v-if="item.status==3">
						<view class="modifyAddress flex margin-right_30rpx" @click.stop="addressFn(item)">
							修改地址
						</view>
						
						<view class="modifyPrice flex" @click.stop="shippingLogisticsFn(item)" v-if="item.status==3">
							立即发货
						</view>
						
					</view>
					<view class="flex-end">
						<view class=" margin-top_30rpx modifyPrice flex" @click.stop="inputCodeVerification(item)" v-if="item.status==4&&item.take_over_way==1">
							输入码核销
						</view>
					</view>
					<view class="flex-end">
						<view class=" margin-top_30rpx modifyPrice flex" @click.stop="selectPrinterFn(item)" v-if="item.status==6&&item.take_over_way==1">
							选择打印机
						</view>
					</view>
					<view class="flex-end">
						<view class=" margin-top_30rpx modifyPrice flex" @click.stop="agreeRefund(item)" v-if="item.status==5">
							同意退款
						</view>
					</view>
				</view>
			</block>
		</mescroll-body>
		<!-- 发货物流 -->
		<sunui-popup ref="shippingLogisticsPop">
			<template v-slot:content>

				<view class="flex font-weight_bold padding20" style="border-bottom: 2rpx solid rgb(230, 230, 230);">
					发货物流
				</view>
				<view class="flex-between padding_30rpx_0" style="border-bottom: 2rpx solid rgb(230, 230, 230);">
					<!-- <view class="">
						选择地区
					</view>
					<view class="">
						<uni-icons type="right" size="15"></uni-icons>
					</view> -->
					<view class="">
						<input class="uni-input" v-model="logisticsForm.express_name" placeholder="选择送货人姓名" />
					</view>
				</view>
				<view class=" padding_20rpx_0 " style="border-bottom: 2rpx solid rgb(230, 230, 230);">
					<view class="">
						<input class="uni-input" type="number" maxlength="11" v-model="logisticsForm.express_phone" placeholder="请填写送货人的电话号码" />
					</view>
				</view>


				<view class="modifyBtn flex" @click="modifyLogistics()">
					确定
				</view>
			</template>
		</sunui-popup>
		<!-- 修改地址 -->
		<sunui-popup ref="myPackagePopup">
			<template v-slot:content>

				<view class="flex font-weight_bold padding20" style="border-bottom: 2rpx solid rgb(230, 230, 230);">
					修改地址
				</view>
				<view class="flex padding_20rpx_0 " style="border-bottom: 2rpx solid rgb(230, 230, 230);">
					<view class="">
						<input class="uni-input" v-model="form.name" placeholder="姓名" />
					</view>
					<view class="borderLeft">

					</view>
					<view class="margin-left_20rpx">

						<input class="uni-input " maxlength="11" type="nickname"  v-model="form.phone" placeholder="电话" />
					</view>
				</view>
				<view class="flex-between padding_30rpx_0" style="border-bottom: 2rpx solid rgb(230, 230, 230);">
					<pca-picker-cc v-on:getAddressResultObj="getAddressResultObj" :addressList.sync="addressList">
						<view class="uni-input">{{ addressList.join(' ') }}</view>
					</pca-picker-cc>
				</view>
				<view class="margin-top_20rpx">
					<view class="uni-textarea">
						<textarea v-model="form.address" placeholder-style="color:#999;" :maxlength="150"
							placeholder="详情地址 (如街道小区 乡镇 村)" />
					</view>
				</view>
				<view class="modifyBtn flex" @click="modifyAddress()">
					确定修改
				</view>
			</template>
		</sunui-popup>
		<!-- 输入框示例 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="修改次数" value="对话框预置提示内容!" placeholder="请输入内容"
				@confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
		<sunui-popup ref="popinvoice">
			<template v-slot:content>
				<view class="popWriteOffCode">
					<!-- 关闭按钮进行定位 -->
					<uni-icons @click='closeWriteOffIcon' class="uniIcon" type="clear" size="25"
						style="color: #07070791;">
					</uni-icons>
					<!-- 核销码 -->
					<view class="WriteOffTop">
						<text class="WriteOffCodeText">核销码</text>
						<text class="writeWriteOff">请您在下方输入框填写自己核销码</text>
					</view>
					<jpCoded :isPwy='false' borderCheckStyle='border: 1px solid #1E6CEB' :places=6 style="height: 80rpx"
						:width="500" :codes="WriteOffCode" @tokey="toOpen" @inputVal="finished"></jpCoded>
					<!-- <wakaryInput v-model="WriteOffCode" @finish="finished" type="box"></wakaryInput> -->
					<view class="sureWriteOff" @click='closeWriteOff'>
						确定核销
					</view>
				</view>
			</template>
		</sunui-popup>

	</view>
</template>

<script>
	import jpCoded from '@/components/jp-coded/jp-coded.vue';
	export default {
		components: {
jpCoded
		},
		data() {
			return {
				// 核销码
				WriteOffCode: '',
				tabIndex: 4,
				searchVal: undefined,
				currentIndex: 0,
				tabList: [{
						name: '全部',
						id: '' //null
					}, {
						name: '待付款',
						id: '1' //null
					},  {
						name: '待发货',
						id: '3' //null
					},

					{
						name: '待收货',
						id: '4' //null
					},
					{
						name: '退款中',
						id: '5' //null
					},
					{
						name: '已完成',
						id: '6' //null
					},
					{
						name: '已退款',
						id: '7' //null
					},
					{
						name: '已取消',
						id: '8' //null
					}
				],
				form: {
					province_id: '',
					city_id: '',
					county_id: '',
					province_name: '',
					city_name: '',
					county_name: '',
					address: '',
				    id:'',
					name: '',
					phone: ''
				},
				addressList: ["", "", ""],
				changeValue: '',
				feedbackContent: '',
				downOption: {
					auto: true
				},
				// 上拉配置项
				upOption: {
					auto: true
				},
				token: uni.getStorageSync('login').token,
				windowHeight: '',
				list: [],
				verifyCodeParams:null,
				orderDetialObject:null,
				statusIndex:'',
				logisticsForm:{
					// 物流公司
					express_name:'',
					// 物流订单
					express_phone:'',
					// 
					id:''
				}
			}
		},
		onLoad() {
			
		},
		onShow() {
			console.log('onShow')
			this.$at.releaseKey('submit');

		},
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 800;
				}
			});
			this.$at.releaseKey('submitAll');
			this.$nextTick(()=>{
				this.mescroll?.resetUpScroll();
			})
		},
		computed: {
			// 订单状态
			orderStatusFn: function() {
				return function(status) {
		
					let orderStatus = '';
					// status订单状态（0.待付款 1.待接单 2.已接单 3.服务中 4.已完成 5.已取消/退款)
					orderStatus =
						status == 0 ? '待付款' : status == 1 ? '待付款' : status == 2 ? '已支付' : status == 3 ? '待发货' :
						status == 4 ? '待收货' : status == 5 ? '退款中' : status == 6?'已完成':status == 7?'已退款':'已取消';
					return orderStatus;
				};
			},
		},
		methods: {
			// 同意退款
			async agreeRefund(item){
				uni.showModal({
					title: '提示',
					content: '是否同意该订单的退款',
					success: async (res) => {
						if (res.confirm) {
				
							const result = await this.$http.post({
								url: this.$api.confirmReturns,
								data: {
									id: item.id,
									
				
								},
								headers: {
									'Authorization': `Bearer ${this.token}`
								}
				
							})
							if (result.code == 0) {
								this.getChange(6,'7')
								// this.currentIndex=6
								// this.$nextTick(()=>{
								// 	this.mescroll?.resetUpScroll();
								// })
								this.$sun.toast(result.msg, 'none')
							} else {
								this.$sun.toast(result.msg, 'none')
							}
						} else if (res.cancel) {
				
						}
					}
				});
			},
			
			// 选择打印机
			selectPrinterFn(item){
				this.$sun.navGo('/pages/packageManagement/printersList/printersList',{...item,type:2})
			},
			// 输入核销码
			inputCodeVerification(item){
				// 这个是核销参数
				this.verifyCodeParams=item
				this.$refs.popinvoice.show({
					anim: 'bottom',
					position: 'bottom',
					shadeClose: false, //false使用户不能点击其它关闭页面
					topclose: false
				});
			},
			
			async closeWriteOff() {
			this.$at.uniDoFunc({
				key: 'submit',
				success: async () => {
					this.$at.lockKey('submit');
					// 调用核销接口前需要调用抽奖记录 通过输入的核销码查询到抽奖的记录id然后在进行核销接口的调用
								
					const result = await this.$http.post({
						url: this.$api.completeGoodsOrder,
						data: {
							id:this.verifyCodeParams.id,
							rand_code:this.WriteOffCode
						},
						headers: {
							'Authorization': `Bearer ${this.token}`
						}
					})		
					// 调用核销接口
					if (result.code==0) {
						this.$sun.toast(result.msg,'none')
						this.closeWriteOffIcon()
						setTimeout(()=>{
							this.getChange(5,'6')
						},500)
						this.$at.releaseKey('submit');
					
					} else {
						this.$sun.toast(result.msg)
						this.closeWriteOffIcon()
						this.WriteOffCode = ''
						this.$at.releaseKey('submit');
					}
			
				}
			});
			
			
			},
			// 关闭核销码
			closeWriteOffIcon() {
				this.WriteOffCode = ''
				this.$refs.popinvoice.close();
			},
			
			
			// 确定核销
			finished(val) {
				console.log(this.WriteOffCode, val)
				this.WriteOffCode = val
			
			},
			changeInput(e){
				console.log(e.detail.value)
				this.searchVal=e.detail.value
				this.$nextTick(()=>{
					this.mescroll?.resetUpScroll();
				})
			},
			// 复制订单号
			paste(orderNumber) {
				uni.setClipboardData({
					data: orderNumber
				});
			},
			// 订单详情页面
			orderDetial(item) {
				
				this.$sun.navGo('/pages/orderManagement/orderDetail', {
					...item
				})
			},
			async upCallback(scroll) {

				const result = await this.$http.post({
					url: this.$api.goodsOrderList,
					data: {
						page: scroll.num,
						limit: 10,
						order_name:this.searchVal,
						status: this.statusIndex,
					    

					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})
				if (result.code == 0) {
					
					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					if (scroll.num == 1) this.list = [];
					result.data.list.forEach((item) => {
						
						item.host_img = item.host_img.split(',').map((item) => item.trim());
					})
					this.list = this.list.concat(result.data.list);
					
					
				}
			},
			// 发货
			modifyLogistics(item){
				if (!this.logisticsForm.express_name) {
					this.$sun.toast('请填写送货人姓名', 'none');
					return false;
				} else if (!this.logisticsForm.express_phone) {
					this.$sun.toast('请填写电话号码', 'none');
					return false;
					// 当前因为省市区/县 是一起的，所以单判断province（省）
				}  else {
					
					this.logisticsForm.id=this.orderDetialObject.id
					/* 防抖动节流 */
					this.$at.uniDoFunc({
						key: 'submitAll',
						success: async () => {
							this.$at.lockKey('submitAll');
							const result = await this.$http.post({
								url: this.$api.express,
								data: {
									...this.logisticsForm
								},
								headers: {
									'Authorization': `Bearer ${this.token}`
								}
				
							})
				
							if (result.code == 0) {
				
				
								this.$at.releaseKey('submitAll');
				
				
								this.$sun.toast('发货成功', 'none')
								// this.$sun.toast(resPoster.msg, 'none')
								
								this.$refs.shippingLogisticsPop.close()
								setTimeout(()=>{
									this.mescroll?.resetUpScroll();
								},500)
								for (const key of Object.keys(this.logisticsForm)) {
								    this.logisticsForm[key] = '';
								}
				
							} else {
								this.$at.releaseKey('submitAll');
								this.$sun.toast(resPoster.msg, 'none')
							}
				
				
						}
					})
				}
			},
			// 修改地址
			modifyAddress(){
				if (!this.form.name) {
					this.$sun.toast('请填写姓名', 'none');
					return false;
				} else if (!/^1[3456789]\d{9}$/.test(this.form.phone)) {
					this.$sun.toast('请输入正确的手机号', 'none');
					return false;
					// 当前因为省市区/县 是一起的，所以单判断province（省）
				} else if (!this.form.province_name) {
					this.$sun.toast('请选择省市区/县', 'none');
					return false;
				} else if (!this.form.address) {
					this.$sun.toast('请填写详细地址', 'none');
					return false;
				} else {
					
					/* 防抖动节流 */
					this.$at.uniDoFunc({
						key: 'submitAll',
						success: async () => {
							this.$at.lockKey('submitAll');
							const result = await this.$http.post({
								url: this.$api.upAddress,
								data: {
									...this.form
								},
								headers: {
									'Authorization': `Bearer ${this.token}`
								}
				
							})
				
							if (result.code == 0) {
				
				
								this.$at.releaseKey('submitAll');
				
				
								this.$sun.toast(result.msg, 'none')
								// this.$sun.toast(resPoster.msg, 'none')
								this.$refs.myPackagePopup.close()
								setTimeout(()=>{
									this.mescroll?.resetUpScroll();
								},500)
				
							} else {
								this.$at.releaseKey('submitAll');
								this.$sun.toast(resPoster.msg, 'none')
							}
				
				
						}
					})
				}
			},
			getChange(index,e) {
				console.log(index,e)
				this.currentIndex = index
				this.statusIndex=Number(e)
				
				this.mescroll?.resetUpScroll();
			},
			// 修改地址
			addressFn(item) {
				console.log(item)
				this.orderDetialObject=item
				// this.form.id=item.id
				this.$sun.assignObject(this.form, {
					...item
				})
				this.addressList[0] = this.form.province_name
				this.addressList[1] = this.form.city_name
				this.addressList[2] = this.form.county_name
				this.$refs.myPackagePopup.show({
					style: 'background-color:#fff;width:642rpx;border-radius:10rpx;padding:30rpx;',
					bottomClose: false,
					shadeClose: true,
					topclose: true
				});
			},
			// 修改物流
			shippingLogisticsFn(item) {
				this.orderDetialObject=item
				// this.$sun.assignObject(this.form, {
				// 	...item
				// })
				this.$refs.shippingLogisticsPop.show({
					style: 'background-color:#fff;width:642rpx;border-radius:10rpx;padding:30rpx;',
					bottomClose: false,
					shadeClose: true,
					topclose: true
				});
			},
			priceFn() {
				// 修改价格
				this.$refs.inputDialog.open()
			},
			getAddressResultObj(e) {
				//获取详细的 省/市/区 对象信息,更新时被动调,主动调用请自行设置ref值,方法一致
				
				this.form.city_name = e.city.name
				this.form.city_id = e.city.code
				this.form.county_name = e.county.name
				this.form.county_id = e.county.code
				this.form.province_name = e.province.name
				this.form.province_id = e.province.code
				
			
			},

		}
	}
</script>

<style lang="less" scoped>
	.popWriteOffCode {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		width: 750rpx;
		height: 600rpx;
		flex-shrink: 0;
		background-color: #FFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		padding: 54rpx 54rpx 98rpx 54rpx;
	
		.WriteOffTop {
			display: flex;
			flex-direction: column;
			align-items: center;
	
			.WriteOffCodeText {
				color: #333;
				font-size: 36rpx;
				font-weight: 700;
				margin-bottom: 20rpx;
			}
	
			.writeWriteOff {
				color: #999;
				font-size: 14px;
				margin-bottom: 66rpx;
			}
		}
	
		.uniIcon {
			position: absolute;
			top: 16rpx;
			right: 20rpx;
		}
	
		.sureWriteOff {
			margin-top: 84rpx;
			border-radius: 20rpx;
			background: #0C91F3;
			box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(12, 145, 243, 0.44);
			width: 624rpx;
			height: 100rpx;
			color: #FFF;
			font-size: 32rpx;
			text-align: center;
			line-height: 100rpx;
		}
	}
	.borderLeft {
		border: 2rpx solid rgb(230, 230, 230);
		height: 58rpx;
		width: 0;
	}

	.modifyBtn {
		margin-top: 50rpx;
		color: rgb(255, 255, 255);
		height: 96rpx;
		border-radius: 96rpx;

		background: linear-gradient(-45.00deg, rgb(73, 143, 242), rgb(73, 101, 242) 100%);
	}

	.orderManagementPage {
		.orderManagementTop {

			background: rgb(255, 255, 255);

			padding: 34rpx;

			// border-radius: 130rpx;
			.timeImg {
				width: 40rpx;
				height: 40rpx;
				margin-left: 5rpx;
				margin-right: 15rpx;
			}

			.search-content {
				justify-content: center;
				display: flex;
				align-items: center;
				// width: 446rpx;
				height: 88rpx;
				margin-right: 24rpx;
				background: rgb(246, 248, 255);
				;
				border-radius: 84rpx;
				width: 100%;

				.search-img {
					width: 30rpx;
					height: 30rpx;
					margin-right: 20rpx;
					margin-left: 40rpx;
				}

				.icon_close {
					padding: 0rpx 15rpx;
					width: 36rpx;
					height: 36rpx;
					margin-right: 30rpx;
				}

			}
		}

		.orderList {
			margin-top: 20rpx;
			padding: 20rpx;

			background: rgb(255, 255, 255);

			.orderDetail {
				padding: 20rpx;

				background: rgb(243, 248, 255);

				.userImg {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;

				}

			}

			.modifyAddress {
				width: 156rpx;
				height: 64rpx;
				box-sizing: content-box;
				border: 1px solid rgb(228, 227, 227);
				border-radius: 30px;
				color: rgb(51, 51, 51);
				background: rgb(244, 243, 243);
			}

			.modifyPrice {
				width: 156rpx;
				height: 64rpx;
				border-radius: 60rpx;
				color: rgb(255, 255, 255);
				background: rgb(49, 105, 248);
			}

			.orderImg {
				width: 180rpx;
				height: 180rpx;
				// border-radius: 20px;


			}

			.copy {
				box-sizing: content-box;
				color: rgb(190, 190, 190);
				border: 2rpx solid rgb(190, 190, 190);
				width: 70rpx;
				height: 33rpx;
				margin-left: 10rpx;

			}

			.sign {
				border-radius: 40rpx 0rpx 0rpx 40rpx;
				width: 112rpx;
				height: 46rpx;
				color: rgb(255, 255, 255);
				margin-right: -20rpx;
				// margin-top: -20rpx;
				font-size: 28rpx;
				font-weight: 400;
				background: rgb(49, 105, 248);
			}
		}
	}

	page {
		background: #f6f6f6;
	}
</style>